<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>申请提现</title>
    <script src="https://cdn.tailwindcss.com/3.3.3"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <style>
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background-color: #f5f7fa;
            color: #333;
            max-width: 750px;
            margin: 0 auto;
        }

        .withdraw-card {
            background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
        }

        .bank-card {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            position: relative;
            overflow: hidden;
        }

        .bank-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 200%;
            height: 200%;
            background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
            transform: rotate(45deg);
        }

        .amount-input {
            border: none;
            outline: none;
            background: transparent;
            font-size: 2rem;
            font-weight: bold;
            color: #4f46e5;
            text-align: center;
            width: 100%;
        }

        .amount-input::placeholder {
            color: #9ca3af;
        }

        .quick-amount {
            transition: all 0.3s ease;
        }

        .quick-amount:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .quick-amount.selected {
            background: #4f46e5;
            color: white;
            border-color: #4f46e5;
        }
    </style>
</head>

<body class="pb-20">
    <!-- 顶部导航 -->
    <header class="bg-white py-4 px-6 shadow-sm">
        <div class="flex items-center relative">
            <a href="my-income.html" class="text-gray-600 absolute left-0 z-10">
                <i class="fas fa-chevron-left text-lg"></i>
            </a>
            <h1 class="text-xl font-semibold text-center flex-1">申请提现</h1>
        </div>
    </header>

    <!-- 可提现余额 -->
    <div class="px-4 pt-4">
        <div class="withdraw-card rounded-xl p-6 text-white shadow-lg">
            <div class="text-center">
                <p class="text-sm opacity-90 mb-2">可提现余额</p>
                <p class="text-3xl font-bold mb-4">¥2,580.50</p>
                <div class="flex justify-between text-sm opacity-90">
                    <span>累计收入: ¥5,280.50</span>
                    <span>已提现: ¥2,700.00</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 提现金额 -->
    <div class="px-4 mt-4">
        <div class="bg-white rounded-xl p-6 shadow-sm">
            <h3 class="text-lg font-medium text-gray-800 mb-4">提现金额</h3>

            <!-- 金额输入 -->
            <div class="text-center mb-6">
                <div class="text-sm text-gray-500 mb-2">请输入提现金额</div>
                <div class="flex items-center justify-center">
                    <span class="text-2xl font-bold text-gray-800 mr-2">¥</span>
                    <input type="number" class="amount-input" placeholder="0.00" id="withdrawAmount" min="1"
                        max="2580.50">
                </div>
                <div class="text-xs text-gray-400 mt-2">最低提现金额 ¥1.00</div>
            </div>

            <!-- 快捷金额 -->
            <div class="mb-4">
                <div class="text-sm text-gray-600 mb-3">快捷金额</div>
                <div class="grid grid-cols-3 gap-3">
                    <button class="quick-amount py-3 px-4 border border-gray-200 rounded-lg text-sm font-medium"
                        data-amount="100">
                        ¥100
                    </button>
                    <button class="quick-amount py-3 px-4 border border-gray-200 rounded-lg text-sm font-medium"
                        data-amount="500">
                        ¥500
                    </button>
                    <button class="quick-amount py-3 px-4 border border-gray-200 rounded-lg text-sm font-medium"
                        data-amount="1000">
                        ¥1000
                    </button>
                    <button class="quick-amount py-3 px-4 border border-gray-200 rounded-lg text-sm font-medium"
                        data-amount="1500">
                        ¥1500
                    </button>
                    <button class="quick-amount py-3 px-4 border border-gray-200 rounded-lg text-sm font-medium"
                        data-amount="2000">
                        ¥2000
                    </button>
                    <button class="quick-amount py-3 px-4 border border-gray-200 rounded-lg text-sm font-medium"
                        data-amount="2580.50">
                        全部
                    </button>
                </div>
            </div>

            <!-- 全部提现 -->
            <div class="text-center">
                <button class="text-blue-500 text-sm font-medium" id="withdrawAll">
                    全部提现 ¥2,580.50
                </button>
            </div>
        </div>
    </div>

    <!-- 提现到银行卡 -->
    <div class="px-4 mt-4">
        <div class="bg-white rounded-xl p-6 shadow-sm">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-medium text-gray-800">提现到银行卡</h3>
                <a href="my-bank.html" class="text-blue-500 text-sm">管理银行卡</a>
            </div>

            <!-- 默认银行卡 -->
            <div class="bank-card rounded-xl p-4 text-white relative">
                <div class="flex justify-between items-start mb-3">
                    <div>
                        <p class="text-sm opacity-90">招商银行</p>
                        <p class="text-lg font-medium">储蓄卡</p>
                    </div>
                    <div class="text-right">
                        <i class="fas fa-credit-card text-2xl opacity-80"></i>
                    </div>
                </div>
                <div class="mb-3">
                    <p class="text-lg font-bold mb-2">**** **** **** 1234</p>
                    <div class="flex justify-between items-center">
                        <div>
                            <p class="text-xs opacity-80">持卡人</p>
                            <p class="text-sm font-medium">张**</p>
                        </div>
                        <div class="text-right">
                            <p class="text-xs opacity-80">有效期</p>
                            <p class="text-sm font-medium">12/25</p>
                        </div>
                    </div>
                </div>
                <div class="flex justify-between items-center">
                    <span class="text-xs opacity-80">默认卡</span>
                    <span class="text-xs opacity-80">VISA</span>
                </div>
            </div>

            <!-- 选择其他银行卡 -->
            <div class="mt-4">
                <button
                    class="w-full py-3 border border-gray-300 text-gray-600 rounded-lg font-medium flex items-center justify-center">
                    <i class="fas fa-plus mr-2"></i>
                    选择其他银行卡
                </button>
            </div>
        </div>
    </div>

    <!-- 提现说明 -->
    <div class="px-4 mt-4">
        <div class="bg-blue-50 rounded-xl p-4">
            <h4 class="font-medium text-blue-800 mb-2">提现说明</h4>
            <div class="text-sm text-blue-700 space-y-1">
                <p>• 提现申请将在1-3个工作日内到账</p>
                <p>• 单笔提现最低金额 ¥1.00</p>
                <p>• 每日提现限额 ¥50,000.00</p>
                <p>• 提现手续费：免费</p>
                <p>• 如遇节假日，到账时间可能顺延</p>
            </div>
        </div>
    </div>

    <!-- 底部按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white p-4 shadow-lg max-w-750 mx-auto">
        <button
            class="w-full py-4 bg-blue-500 text-white rounded-xl font-medium text-lg hover:bg-blue-600 transition-colors"
            id="submitWithdraw">
            确认提现
        </button>
    </div>

    <script>
        // 快捷金额选择
        document.querySelectorAll('.quick-amount').forEach(btn => {
            btn.addEventListener('click', function () {
                // 移除其他按钮的选中状态
                document.querySelectorAll('.quick-amount').forEach(b => {
                    b.classList.remove('selected');
                });

                // 添加当前按钮的选中状态
                this.classList.add('selected');

                // 设置输入框的值
                const amount = this.getAttribute('data-amount');
                document.getElementById('withdrawAmount').value = amount;
            });
        });

        // 全部提现
        document.getElementById('withdrawAll').addEventListener('click', function () {
            // 移除快捷金额的选中状态
            document.querySelectorAll('.quick-amount').forEach(b => {
                b.classList.remove('selected');
            });

            // 设置输入框的值为全部余额
            document.getElementById('withdrawAmount').value = '2580.50';
        });

        // 输入框值变化时移除快捷金额选中状态
        document.getElementById('withdrawAmount').addEventListener('input', function () {
            document.querySelectorAll('.quick-amount').forEach(b => {
                b.classList.remove('selected');
            });
        });

        // 确认提现
        document.getElementById('submitWithdraw').addEventListener('click', function () {
            const amount = document.getElementById('withdrawAmount').value;

            if (!amount || parseFloat(amount) <= 0) {
                alert('请输入有效的提现金额');
                return;
            }

            if (parseFloat(amount) > 2580.50) {
                alert('提现金额不能超过可提现余额');
                return;
            }

            if (parseFloat(amount) < 1) {
                alert('最低提现金额为 ¥1.00');
                return;
            }

            // 显示确认对话框
            if (confirm(`确认提现 ¥${amount} 到招商银行储蓄卡吗？`)) {
                alert('提现申请已提交，预计1-3个工作日内到账');
                // 这里可以添加实际的提现逻辑
                // window.location.href = 'withdraw-success.html';
            }
        });
    </script>
</body>

</html>